<template>
  <div class="pie-charts">
    <div class="chart-pie">
      <v-chart autoresize :options="options" style="width:100%;height:100%;"/>
    </div>
    <div class="chart-legend-list">
      <div
        v-for="(item,index) in list"
        :key="`legend-list-${index}`"
        class="chart-legend-list-line"
      >
        <i class="icon-circel" :style="{backgroundColor:options.color[index]}"/>
        <span class="legend-name">{{ item.name }}</span>
        <span class="legend-value">{{ item.percent }}%</span>
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import { graphic } from 'echarts/lib/export'
import { Decimal } from 'decimal.js'

export default {
  name: 'PieChart',
  data() {
    return {
      data: [
        { value: 1548, name: '污水处理厂', percent: '' },
        { value: 535, name: '造纸', percent: '' },
        { value: 510, name: '焦化', percent: '' },
        { value: 634, name: '食品制造', percent: '' },
        { value: 735, name: '煤炭', percent: '' },
        { value: 735, name: '机械制造', percent: '' },
        { value: 735, name: '电力', percent: '' }
      ]
    }
  },
  computed: {
    list() {
      const data = this.data
      let total = 0
      data.forEach(item => {
        total += item.value
      })
      data.forEach(item => {
        item.percent = new Decimal(item.value / total * 100).toFixed(2)
      })
      return data
    },
    options() {
      const data = this.data
      const legend = data.map((item) => {
        return item.name
      })
      return {
        color: [
          '#3d84ff',
          '#2fc8a1',
          '#ffd600',
          '#dc6b6b',
          '#7ed321',
          '#f5a623',
          '#b8e986',
          '#182a5e',
        ],
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: false,
          data: legend
        },
        series: [
          {
            name: '烟尘行业占比统计',
            type: 'pie',
            radius: '100%',
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/style/global.scss";

.pie-charts {
  @include clearfix;
  overflow: hidden;

  .chart-pie {
    display: inline-block;
    vertical-align: top;
    width: 192px;
    height: 192px;
    float: left;
    margin: 10% 0 0 0;
  }

  .chart-legend-list {
    min-width: 320px;
    display: block;
    vertical-align: top;
    margin: 8% 0 0 276px;
    color: #313748;

    .chart-legend-list-line {
      line-height: 22px;
      margin: 0 0 10px 0;
      font-size: 13px;
    }

    .legend-name {
      width: 70px;
      display: inline-block;
      vertical-align: top;
    }

    .legend-value {
      display: inline-block;
      vertical-align: top;

      &:before {
        display: inline-block;
        vertical-align: middle;
        content: '';
        border: 1px dashed #e9ecf1;
        width: 112px;
        margin: 0 10px;
      }
    }

    .icon-circel {
      border-radius: 100%;
      background: #3d84ff;
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 0 16px 0 0;
    }
  }
}
</style>
